<template>

	<div class="loginMain">

		<div class="videoContent">
			<video :autoplay="true" :muted="true" :loop="true" class="backVideo">
				<source src="../../../video/back.mp4" />
			</video>
		</div>

		<div class="form" >
			<div class="login-container" style="width: 100%; justify-content: right;">
				<div class="logo-title cc-flex flex-center">
					<img src="@/assets/logo.png" alt="" />
					<div class="logo-title-text">测试系统哦</div>
				</div>
				<div class="login-form-box cc-flex flex-center">
					<div class="login-form">
						<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" @keyup.enter="onLogin">
							<div class="login-title">{{ $t('app.signIn') }}</div>
							<el-form-item prop="mobile">
								<el-input v-model="loginForm.mobile" :prefix-icon="User"
									:placeholder="$t('app.username')">
								</el-input>
							</el-form-item>
							<el-form-item prop="password">
								<el-input v-model="loginForm.password" :prefix-icon="Lock" show-password
									:placeholder="$t('app.password')"></el-input>
							</el-form-item>
							<el-form-item prop="verifyCode" class="login-captcha">
								<div class="cc-flex flex-h-100 flex-h-between" id="verifyCode-image">
									<el-input class="flex-h-100" v-model="loginForm.verifyCode"
										:placeholder="$t('app.captcha')" :prefix-icon="Key"></el-input>
									<!-- <img :src="tokenTempInfo.verifyCodeImage" @click="applyTempToken" /> -->
									<div class="el-image-box flex-0" @click="applyTempToken()">
										<el-image class="el-image flex-100" :src="tokenTempInfo.verifyCodeImage">
											<template #error>
												<div class="cc-flex flex-100 flex-center verifyCode-tip">点击加载</div>
											</template>
										</el-image>
									</div>
								</div>
							</el-form-item>
							<el-form-item class="login-button">
								<el-button v-loading :loading="loging" type="primary" @click="onLogin()">登录</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
				<div class="footer cc-flex flex-v flex-h-center">
					<div class="left">
						<div>@CopyRight:XXXXXX科技有限公司</div>
						<div>ICP备:滇155-659556251</div>
					</div>
					<div class="suport">技术支持：XXXXXX科技有限公司</div>
				</div>
			</div>
		</div>



	</div>


</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { User, Lock, Key } from '@element-plus/icons-vue'
import store from '@/store'
import { UserService } from '@/modules/user'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { ElLoading } from 'element-plus'

const router = useRouter()
const { t } = useI18n()
const loginFormRef = ref()
const loging = ref<boolean>(false)

const tokenTempInfo = reactive({
	verifyCodeImage: '',
	publicKey: '',
	token: ''
})

const loginForm = reactive({
	mobile: '', //13928480615
	password: '', //admin123456
	verifyCode: '',
	token: ''
})

const loginRules = ref({
	mobile: [
		{ required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
		{
			validator: (rule: any, value: string, callback: any) => {
				let regExp = new RegExp('^1[3456789]\\d{9}$')
				if (!regExp.test(value)) {
					callback(new Error('请输入正确的手机号'))
				} else {
					callback()
				}
			}
		}
	],
	password: [{ required: true, message: '请输入密码', trigger: ['blur', 'change'] }],
	verifyCode: [{ required: true, message: '请输入验证码', trigger: ['blur', 'change'] }]
})

onMounted(() => {
	applyTempToken()
})

function applyTempToken() {
	const loadingArea = ElLoading.service({
		target: '#verifyCode-image',
		lock: true,
		background: 'rgba(0, 0, 0, 0.5)'
	})
	loginForm.verifyCode = ''
	UserService.applyTempToken()
		.then((res: any) => {
			tokenTempInfo.verifyCodeImage = 'data:image/jpg;base64,' + res.verifyCodeImage
			tokenTempInfo.publicKey = res.publicKey
			tokenTempInfo.token = res.token
		})
		.finally(() => {
			loadingArea.close()
		})
}

function onLogin() {
	loginFormRef.value.validate((valid: boolean) => {
		if (!valid) return false
		let password = UserService.RsaEncryption(tokenTempInfo.publicKey, loginForm.password)
		loging.value = true
		router.push({ path: '/home' })
		// // 用户登录
		// store.userStore
		// 	.loginAction({ mobile: loginForm.mobile, password, token: tokenTempInfo.token, verifyCode: loginForm.verifyCode })
		// 	.then(() => {

		// 	})
		// 	.catch(() => {
		// 		applyTempToken()
		// 	})
		// 	.finally(() => {
		// 		loging.value = false
		// 	})
	})
}
</script>

<style lang="scss" scoped>
.loginMain {
	display: flex;
	position: relative;
	width: 100%;
}

.videoContent {
	position: absolute;
	width: 100%;
	height: 100vh;

	.backVideo {
		position: absolute;
		// top: 50%;
		// right: 0px;
		// transform: translate(-50%, -50%);
		min-width: 100%;
		min-height: 100%;
		width: auto;
		height: auto;
	}
}

.from {
	position: absolute;
	width: 100%;
	height: 100vh;
}




@media only screen and (max-width: 992px) {
	.login-intro {
		display: none;
	}
}

@media only screen and (max-width: 768px) {
	.login-container {
		background: #fff;
	}

	.login-intro {
		display: none;
	}

	.login-form {
		flex: 0 1 auto;
		border-radius: 0;
		box-shadow: none;
	}

	.login-captcha {
		:deep(.el-input) {
			width: 150px;
		}
	}
}

.footer {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 50px;
	background-color: rgba($color: #000, $alpha: 0.5);
	color: white;

	.left {
		padding-left: 50px;
		font-size: 12px;
	}

	.suport {
		position: absolute;
		right: 0px;
		bottom: 10px;
		font-size: 12px;
		transform: scale(0.85);
	}
}
</style>
